<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>全局注册</title>
        <style>
            code { border: 1px solid #d1d1d1; background: #f0f0f0; }
        </style>
    </head>
    <body>

        <h3>定义、注册、使用组件 ( vue.js 3.x )</h3>
        <ol>
            <li>
                定义组件
                <ul>
                    <li>与根组件的配置一样，组件都可以有 template、data、methods 等选项</li>
                    <li>其中 template 必须指定 (或者使用渲染函数来替代)</li>
                </ul>
            </li>
            <li>
                注册组件
                <ul>
                    <li>在 Vue.js 3.x 中全局注册组件: <code>app.component( name , definition )</code></li>
                    <li>在 Vue.js 3.x 中通过 <code>app.component( name )</code> 可以获得全局注册过的组件</li>
                </ul>
            </li>
            <li>
                使用组件:
                <ul>
                    <li>将已经全局注册的组件像标签一样使用即可，比如<code>&lt;counter&gt;&lt;/counter&gt;</code></li>
                </ul>
            </li>
        </ol>
        

        <div id="root">
            <!-- 3、使用组件 -->
            <counter></counter>
            <counter></counter>
            <counter></counter>
        </div>

        <!-- 导入 vue.js 3.x -->
        <script src="../scripts/vue@3.2.31.js" type="text/javascript"></script>
        
        <script type="text/javascript">
            // 根组件配置
            const rootOptions = {
                data(){
                    return {
                        name: 'root' 
                    }
                }
            }

            // 创建应用(application)
            const app = Vue.createApp( rootOptions );

            // 1、定义组件
            const counter = {
                // 指定组件的模板
                template: `<p>
                                <button @click="handle">{{ value }}</button>
                           </p>`,
                // 指定组件的数据
                data(){
                    return {
                        value: 1
                    }
                },
                // 指定组件的方法
                methods: {
                    handle(){
                        this.value++;
                    }
                }
            }

            // 2、注册组件(全局注册: 通过 应用 实现全局注册 )
            // app.component( name [ , definition ] )
            let result = app.component( 'counter' , counter );
            console.log( result === app ); // true
            // 若未指定第二个参数则表示获取指定名称的组件
            result = app.component( 'counter' );
            console.log( result === counter ); // true

            const root = app.mount('#root');
        </script>

    </body>
</html>